View GitHub Repository simple-service-status

Schedule Inspection
Subscribe
Passed
Push — master ( 3aee49...a38a3e )
by Seonkuk
03:15
created

Loading.componentWillReceiveProps   A

↳ Parent: Loading

Complexity

Conditions 3

Size

Total Lines 7
Code Lines 6

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 3
eloc 6
dl 0
loc 7
rs 10
c 0
b 0
f 0
1 
import React from 'react';
2 
import PropTypes from 'prop-types';
3 

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    4
                

                                    
                                                    
                
                
                
export default class Loading extends React.Component {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    5
                

                                    
                                                    
                
                
                
  constructor(props) {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    6
                

                                    
                                                    
                
                
                
    super(props);

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    7
                

                                    
                                                    
                
                
                
    this.state = {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    8
                

                                    
                                                    
                
                
                
      style: { display: 'none' },

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    9
                

                                    
                                                    
                
                
                
    };

            


            
                                                                                                            
                                                                
            
                                    
            
            

                
                    10
                

                                    
                                                    
                
                
                
  }

            


            
                                                                        
                            
            
                                    
            
            

                
                    11
                

                                    
                                                    
                
                
                

            


            
                                                                        
                            
            
                                    
            
            

                
                    12
                

                                    
                                                    
                
                
                
  componentWillReceiveProps(newProps) {

            


            
                                                                        
                            
            
                                    
            
            

                
                    13
                

                                    
                                                    
                
                
                
    if (newProps.show) {

            


            
                                                                        
                            
            
                                    
            
            

                
                    14
                

                                    
                                                    
                
                
                
      this.setState({ style: {} });

            


            
                                                                        
                            
            
                                    
            
            

                
                    15
                

                                    
                                                    
                
                
                
    } else if (this.props.show && !newProps.show) { // true => false

            


            
                                                                        
                            
            
                                    
            
            

                
                    16
                

                                    
                                                    
                
                
                
      // set display to 'none' after 1 sec (for fade-out animation)

            


            
                                                                        
                            
            
                                    
            
            

                
                    17
                

                                    
                                                    
                
                
                
      setTimeout(() => this.setState({ style: { display: 'none' } }), 1000);

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    18
                

                                    
                                                    
                
                
                
    }

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    19
                

                                    
                                                    
                
                
                
  }

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    20
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    21
                

                                    
                                                    
                
                
                
  render() {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    22
                

                                    
                                                    
                
                
                
    return <div className={`loading-backdrop fade ${this.props.show ? 'in' : ''}`} style={this.state.style}><div className="loading" /></div>;

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    23
                

                                    
                                                    
                
                
                
  }

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    24
                

                                    
                                                    
                
                
                
}

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    25
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    26
                

                                    
                                                    
                
                
                
Loading.defaultProps = {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    27
                

                                    
                                                    
                
                
                
  show: false,

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    28
                

                                    
                                                    
                
                
                
};

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    29
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    30
                

                                    
                                                    
                
                
                
Loading.propTypes = {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    31
                

                                    
                                                    
                
                
                
  show: PropTypes.bool,

            


            
                                                                                                            
                                                                
            
                                    
            
            

                
                    32
                

                                    
                                                    
                
                
                
};

            


            
                                                        
            
                                    
            
            

                
                    33